<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
    backgroundColor: '#080b30',
    textStyle: {
    color: '#fff',
    fontSize: 16
    },
    title: {
    text: 'TITLE',
    textStyle: {
    align: 'center',
    color: '#fff',
    fontSize: 20,
    },
    top: '5%',
    left: 'center',
    },
    legend: {
    value: ['A', 'B'],
    textStyle: {
    color: '#fff',
    align: 'center',
    fontSize: 16
    },
    x: 'center',
    top: "10%"
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
    lineStyle: {
    color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
    offset: 0,
    color: 'rgba(0, 255, 233,0)'
    }, {
    offset: 0.5,
    color: 'rgba(255, 255, 255,1)',
    }, {
    offset: 1,
    color: 'rgba(0, 255, 233,0)'
    }],
    global: false
    }
    },
    },
    },
    grid: {
    top: '15%',
    left: '5%',
    right: '5%',
    bottom: '15%',
    },
    xAxis: [{
    type: 'category',
    axisLabel: {
    color: '#d1e6eb',
    fontSize: 16
    },
    axisLine: {
    show: true
    },
    splitArea: {
    color: '#f00',
    lineStyle: {
    color: '#f00'
    },
    },
    splitLine: {
    show: false
    },
    boundaryGap: false,
    value: []
    }],
    yAxis: [{
    type: 'value',
    name: 'Y轴',
    nameTextStyle: {
    color: '#fff',
    fontSize: 16
    },
    splitNumber: 4,
    splitLine: {
    show: true,
    lineStyle: {
    color: 'rgba(255,255,255,0.1)'
    }
    },
    axisLine: {
    show: true,
    },
    axisLabel: {
    show: true,
    margin: 20,
    textStyle: {
    color: '#d1e6eb',
    fontSize: 16
    },
    },
    axisTick: {
    show: false,
    },
    }],
    series: [{
    name: 'NO2',
    type: 'line',
    // smooth: true, //是否平滑
    showAllSymbol: true,
    symbol: 'circle',
    symbolSize: 25,
    lineStyle: {
    normal: {
    color: "#6c50f3",
    shadowColor: 'rgba(0, 0, 0, .3)',
    shadowBlur: 0,
    shadowOffsetY: 5,
    shadowOffsetX: 5,
    },
    },
    label: {
    show: true,
    position: 'top',
    textStyle: {
    color: '#6c50f3',
    fontSize: 16
    }
    },
    itemStyle: {
    color: "#6c50f3",
    borderColor: "#fff",
    borderWidth: 3,
    shadowColor: 'rgba(0, 0, 0, .3)',
    shadowBlur: 0,
    shadowOffsetY: 2,
    shadowOffsetX: 2,
    },
    areaStyle: {
    normal: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'rgba(108,80,243,0.3)'
    },
    {
    offset: 1,
    color: 'rgba(108,80,243,0)'
    }
    ], false),
    shadowColor: 'rgba(108,80,243, 0.9)',
    shadowBlur: 20
    }
    },
    value: []
    }, {
    name: 'O3',
    type: 'line',
    // smooth: true, //是否平滑
    showAllSymbol: true,
    symbol: 'circle',
    symbolSize: 25,
    lineStyle: {
    normal: {
    color: "#00ca95",
    shadowColor: 'rgba(0, 0, 0, .3)',
    shadowBlur: 0,
    shadowOffsetY: 5,
    shadowOffsetX: 5,
    },
    },
    label: {
    show: true,
    position: 'top',
    textStyle: {
    color: '#00ca95',
    fontSize: 16
    }
    },
    itemStyle: {
    color: "#00ca95",
    borderColor: "#fff",
    borderWidth: 3,
    shadowColor: 'rgba(0, 0, 0, .3)',
    shadowBlur: 0,
    shadowOffsetY: 2,
    shadowOffsetX: 2,
    },
    tooltip: {
    show: false
    },
    areaStyle: {
    normal: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: 'rgba(0,202,149,0.3)'
    },
    {
    offset: 1,
    color: 'rgba(0,202,149,0)'
    }
    ], false),
    shadowColor: 'rgba(0,202,149, 0.9)',
    shadowBlur: 20
    }
    },
    value: [],
    },
    ]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
    type : "post",
    async : true,
    url : "/api/base",
    value : {},
    dataType : "json",
    success : function(result) {
    if (vip.meeet.tool.code == 200) {
    myChart.hideLoading();
    result.value.xAxis.forEach(function (item,index) {
    option.xAxis[index].value = item.value;
    option.xAxis[index].type = item.type;
    option.xAxis[index].name = item.name;
    });

    result.value.yAxis.forEach(function (item,index) {
    option.yAxis[index].value = item.value;
    option.yAxis[index].type = item.type;
    option.yAxis[index].name = item.name;
    });

    result.value.series.forEach(function (item,index) {
    option.series[index].value = item.value;
    option.series[index].type = item.type;
    option.series[index].name = item.name;
    });

    if(result.value.legend){
    option.legend.value = result.value.legend;
    }
    if(result.value.title){
    option.title.text = result.value.title;
    }
    myChart.setOption(option);
    }
    },
    error : function(errorMsg) {
    alert("图表请求数据失败!");
    myChart.hideLoading();
    }
    });
</script>
